<template>
  <view class="collected-wrap" :data-theme="globPrimary">
    <u-navbar :z-index="10076">
      <view class="collected-navbar" :style="[titleStyle]" @click="clickNavbarHeader">
        <view class="title u-line-1">题目收藏</view>
        <u-image
          class="img"
          :class="{ active: navbarPopupVisible }"
          width="36rpx"
          height="36rpx"
          src="@/pageUser/static/images/myexam_up_icon.png"
        ></u-image>
      </view>
      <view slot="right" class="collected-navbar-btn" @click="checkedShow = !checkedShow">
        {{ checkedShow ? '取消' : '管理' }}
      </view>
    </u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getdataInfo"
    >
      <view class="collected-list">
        <view
          class="collected-item"
          :style="{
            transform: `translateX(${checkedShow ? 0 : -70}rpx)`,
          }"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="collected-item__del">
            <u-checkbox
              :value="currentCheckboxState(item.topic_id)"
              :activeColor="globPrimaryColor"
              size="40"
              icon-size="30"
              shape="circle"
              :name="item.topic_id"
              @change="checkboxChange"
            ></u-checkbox>
          </view>
          <view class="collected-item__content u-border-bottom" @click="clickCollItem(item)">
            <view class="title u-line-2">
              <u-tag
                :text="item.question_type_text"
                size="mini"
                mode="dark"
                :bg-color="globPrimaryColor"
              />
              {{ delHtmlTag(item.topic_title) }}
            </view>
            <view class="desc">
              <text class="text">{{ item.create_time | timeFormat('yyyy-mm-dd hh:MM:ss') }}</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <view class="collected-bottom" v-if="checkedShow">
      <view class="collected-bottom__content">
        <u-checkbox
          v-model="checkAll"
          :activeColor="globPrimaryColor"
          size="40"
          icon-size="30"
          shape="circle"
          @change="changeCheckAll"
          >全选</u-checkbox
        >
        <view class="count" @click="handleCancelCollect">
          {{ `取消收藏(${collectedLength})` }}
        </view>
      </view>
      <view class="collected-bottom__placeholder"></view>
    </view>
    <!-- 下拉 -->
    <u-popup v-model="navbarPopupVisible" mode="top">
      <view
        :style="{
          width: '100%',
          height: globNavbarHeight + globStatusBarHeight + 'px',
        }"
      ></view>
      <view class="collected-popup">
        <view
          class="collected-popup-item u-border-bottom"
          :class="{
            active: navbarActive == item.value,
          }"
          v-for="item in navbarOptions"
          :key="item.value"
          @click="clickNavbarItem(item.url)"
        >
          {{ item.title }}
        </view>
      </view>
    </u-popup>
    <!-- 提示 -->
    <u-modal
      v-model="showModal"
      :content="modalContent"
      :confirm-text="modalBtnText"
      :confirm-color="globPrimaryColor"
      :z-index="10099"
      show-cancel-button
      @confirm="onConfirm"
      :confirm-style="{ borderLeft: '1px solid #DCDEE3' }"
    ></u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      navbarActive: 3,
      navbarPopupVisible: false,
      navbarOptions: [
        {
          title: '我的待考',
          value: 4,
          url: '/pageUser/exam/index',
        },
        {
          title: '考试记录',
          value: 1,
          url: '/pageUser/exam/record',
        },
        {
          title: '错题本',
          value: 2,
          url: '/pageUser/exam/wrong',
        },
        {
          title: '题目收藏',
          value: 3,
          url: '/pageUser/exam/collected',
        },
      ],
      list: [],
      checkedShow: false,
      checkAll: false,
      checkedList: [],
      showModal: false,
      modalContent: '确定要取消收藏的题吗？',
      modalBtnText: '确认',
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
    collectedLength() {
      return this.checkedList.length
    },
    // 导航中间的标题的样式
    titleStyle() {
      let titleWidth = 170
      let systemInfo = this.$u.sys()
      let style = {}
      // #ifndef MP
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      // #endif
      // #ifdef MP
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right =
        rightButtonWidth -
        (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 +
        rightButtonWidth +
        'px'
      // #endif
      style.width = uni.upx2px(titleWidth) + 'px'
      return style
    },
  },
  methods: {
    clickNavbarHeader() {
      this.navbarPopupVisible = !this.navbarPopupVisible
    },
    clickNavbarItem(url) {
      this.navbarPopupVisible = false
      this.$u.route(url)
    },
    getdataInfo(page) {
      this.$edu.api
        .getCollectList({
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data

          if (page.num == 1) this.list = []
          this.list = this.list.concat(list)
          this.mescroll.endSuccess(list.length)
        })
    },
    // 单选
    checkboxChange(e) {
      if (e.value && !this.checkedList.includes(e.name)) {
        this.checkedList.push(e.name)
      } else {
        this.checkedList.splice(
          this.checkedList.findIndex((item) => item === e.name),
          1
        )
      }
      this.checkAll = this.checkedList.length == this.list.length
    },
    // 全选与取消全选
    changeCheckAll() {
      if (this.checkAll) {
        this.checkedList = []
      } else {
        this.checkedList = this.list.map((item) => item.topic_id)
      }
    },
    // 当前选中状态
    currentCheckboxState(id) {
      return this.checkedList.includes(id)
    },
    // 取消试题收藏
    handleCancelCollect() {
      if (this.$u.test.empty(this.checkedList)) {
        this.$u.toast('请选择要取消收藏的题')
      } else {
        this.showModal = true
      }
    },
    // 确认取消试题收藏
    onConfirm() {
      this.$edu.api
        .getTopicCollect({
          topic_id: this.checkedList.toString(),
          status: 0,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.mescroll.resetUpScroll()
          this.mescroll.scrollTo(0, 0)
          this.checkedList = []
          this.checkAll = false
        })
        .catch((err) => {
          this.$u.toast(res.msg)
        })
    },
    // 跳转
    clickCollItem(item) {
      this.$u.route('pageFound/exam/collected', {
        id: item.topic_id,
      })
    },
    // 去除富文本的标签
    delHtmlTag(html = '') {
      // 获取内容
      let reg = new RegExp('<.+?>|&nbsp;', 'g') //匹配html标签的正则表达式
      let text = html.replace(reg, '') //执行替换成空字符
      return text
    },
  },
}
</script>

<style lang="scss" scoped>
.collected-wrap {
  background-color: #ffffff;
}
.collected-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  height: 60rpx;
  .title {
    font-size: 16px;
    color: $edu-content-color;
  }
  .img {
    transform: rotate(180deg);
    margin-left: 12rpx;
    &.active {
      transform: rotate(0deg);
    }
  }
}
.collected-navbar-btn {
  margin-right: 30rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: $edu-main-color;
  line-height: 42rpx;
}
.collected-list {
  overflow: hidden;

  .collected-item {
    display: flex;
    width: calc(100vw + 70rpx);
    position: relative;
    padding-left: 30rpx;
    .collected-item__del {
      flex: none;
      width: 40rpx;
      padding-top: 30rpx;
    }
    .collected-item__content {
      flex: 1 1 auto;
      padding: 24rpx 30rpx 24rpx 0;
      margin-left: 30rpx;
    }
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: $edu-main-color;
      line-height: 50rpx;
    }
    .u-tag {
      margin-right: 10rpx;
    }
    .desc {
      margin-top: 28rpx;
      display: flex;
      align-items: center;
      .text {
        font-size: 24rpx;
        font-weight: 400;
        color: $edu-tips-color;
      }
    }
  }
}
.collected-popup {
  padding: 0 30rpx 0;
  .collected-popup-item {
    padding: 24rpx 0;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    &.active {
      @include text-color();
    }
  }
}
.collected-bottom {
  .collected-bottom__content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 98rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
  }
  .count {
    font-size: 32rpx;
    font-weight: 400;
    @include text-color();
  }
  .collected-bottom__placeholder {
    height: 98rpx;
    width: 100%;
  }
}
</style>
